---
title: Textarea
description: Used to enter multiple lines of text.
links:
  source: components/textarea
  storybook: components-textarea--basic
  recipe: textarea
---

<ExampleTabs name="textarea-basic" />

## Usage

```jsx
import { Textarea } from "@chakra-ui/react"
```

```jsx
<Textarea placeholder="..." />
```

## Examples

### Variants

Use the `variant` prop to change the appearance of the textarea.

<ExampleTabs name="textarea-with-variants" />

### Sizes

Use the `size` prop to change the size of the textarea.

<ExampleTabs name="textarea-with-sizes" />

### Helper Text

Pair the textarea with the `Field` component to add helper text.

<ExampleTabs name="textarea-with-helper-text" />

### Error Text

Pair the textarea with the `Field` component to add error text.

<ExampleTabs name="textarea-with-error-text" />

### Field

Compose the textarea with the `Field` component to add a label, helper text, and
error text.

<ExampleTabs name="input-with-field" />

### Hook Form

Here's an example of how to integrate the textarea with `react-hook-form`.

<ExampleTabs name="textarea-with-hook-form" />

### Resize

Use the `resize` prop to control the resize behavior of the textarea.

<ExampleTabs name="textarea-with-resize" />

To limit the maximum height (or rows) of the textarea, we recommend using the
`maxHeight` prop and setting the value to a `lh` unit.

```tsx
<Textarea autoresize maxH="5lh" />
```

### Autoresize

Use the `autoresize` prop to make the textarea autoresize vertically as you
type.

<ExampleTabs name="textarea-with-autoresize" />

### Ref

Here's how to access the underlying element reference

```tsx
const Demo = () => {
  const ref = useRef<HTMLTextAreaElement | null>(null)
  return <Textarea ref={ref} />
}
```

## Props

<PropTable component="Textarea" part="Textarea" />
